<template>
  <header>
    <h1>Back-Manage</h1>
    <div class="user-box">
      <el-avatar :src="photoSrc" :size="30">{{ avatarWord }}</el-avatar>
      <p>{{ username }}</p>
      <el-button type="primary" link @click="logOutHandle">退出登录</el-button>
    </div>
  </header>
</template>

<script setup>
import { ref, reactive, computed, } from "vue";
import { useRouter } from "vue-router";
import { logoutApi } from "@/api/login";
import { setStorage } from '@/utils/storage';
import {useTokenStore} from '@/stores/token';
import {useUserStore} from '@/stores/user';
import {useMenusStore} from '@/stores/menus';
import { storeToRefs } from "pinia";

const {clearToken} = useTokenStore()
const { clearMenus } = useMenusStore()
const userStore = useUserStore()
const router = useRouter()

// console.log(userStore.user.username);

const username = computed(() => userStore.user?.username ?? '')
const photoSrc = computed(() => userStore.user?.photo ?? '')
const avatarWord = computed(() => username.value?.slice(0, 1).toUpperCase())

const logOutHandle = () => {
	logoutApi().then(res => {
		if (res.code == 200) {
			router.push('/login')
      clearToken()
      userStore.clearUser()
      clearMenus()
		}
		
	})
}


</script>

<style lang="less" scoped>
header{
  height: 50px;
  box-sizing: border-box;
  padding: 0 20px;
  background-color: rgb(207, 207, 176);
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;

  h1 {
    font-size: 20px;
  }
  .user-box {
    display: flex;
    align-items: center;
    p {
      padding: 0 10px;
    }
  }
}
</style>
